<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品二级分类</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 980px;
            margin: 0 auto;
        }

        .container h3 {
            font-size: 18px;
            color: #666;
            font-weight: normal;
            text-align: center;
            line-height: 100px;
        }

        .container .sub-list {
            background-color: #fff;
        }

        .container .sub-list ul {
            display: flex;
            padding: 0 32px;
            flex-wrap: wrap;
        }

        .container .sub-list ul li {
            width: 168px;
            height: 160px;
        }

        .container .sub-list ul li a {
            text-align: center;
            display: block;
            font-size: 14px;
        }

        .container .sub-list ul li a img {
            width: 100px;
            height: 100px;
        }

        .container .sub-list ul li a p {
            line-height: 40px;
        }

        .container .sub-list ul li a:hover {
            color: var(--xtx-color);
        }

        .ref-goods {
            background-color: #fff;
            margin-top: 20px;
            position: relative;
        }

        .ref-goods .head .xtx-more {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .ref-goods .head .tag {
            text-align: center;
            color: #999;
            font-size: 20px;
            position: relative;
            top: -20px;
        }

        .ref-goods .body {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0 65px 30px;
        }

        .ref-goods .body .none {
            height: 220px;
            text-align: center;
            width: 100%;
            line-height: 220px;
            color: #999;
        }
    </style>
</head>

<body>
    <!-- 大容器 -->
    <div class="container">
        <div class="sub-list"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 目标：把所有商品分类“同时”渲染到页面上
         *  1. 获取所有一级分类数据
         *  2. 遍历id，创建获取二级分类请求
         *  3. 合并所有二级分类Promise对象
         *  4. 等待同时成功后，渲染页面
        */

        // 1. 获取所有一级分类数据
        axios({
            url: 'http://hmajax.itheima.net/api/category/top'
        }).then(result => {
            // 2.遍历id创建二级分类请求
            const secPromiseList = result.data.data.map(item => {
                return axios({
                    url: 'http://hmajax.itheima.net/api/category/sub',
                    params: { id: item.id }
                })
            })
            // 3.合并所有二级分类 Promise 对象
            const promise = Promise.all(secPromiseList)
            promise.then(result => {
                console.log(result);
                document.querySelector('.sub-list').innerHTML = result.map(item => {
                    return `<div class="item">
                                <h3>${item.data.data.name}</h3>
                                <ul>
                                    ${item.data.data.children.map(item => {
                        return `<li>
                                                    <a href="javascript:;">
                                                        <img src="${item.picture}">
                                                        <p>${item.name}</p>
                                                    </a>
                                                </li>`
                    }).join('')}
                                </ul>
                            </div>`
                }).join('')
            })
        })
    </script>
</body>

</html>